<template>
  <view class="patient-card" @click="handleClick">
    <view class="patient-info">
      <view>
        <image v-if="patient.patHeadImg" :src="baseURL+patient.patHeadImg" style="height: 104rpx; width: 104rpx; border-radius: 50rpx;"></image>
        <view v-else class="avatar-placeholder"></view>
      </view>
      <view class="patient-details">
        <view class="patient-name">{{patient.patName}}</view>
        <view class="patient-basic-info">{{patient.patSex=="1"?"男":"女"}} | {{patient.patAge}}岁</view>
        <view class="patient-tags">
          <view v-for="(tag, tagIndex) in patient.tags" :key="tagIndex" class="patient-tag">
            {{tag}}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'PatientInfoCard',
  props: {
    // 患者信息对象
    patient: {
      type: Object,
      required: true,
      default: () => ({})
    },
    // 点击处理函数
    onCardClick: {
      type: Function,
      default: null
    }
  },
  computed: {
    ...mapGetters(['baseURL']),
  },
  methods: {
    handleClick() {
      // 如果有传入自定义点击处理函数，则调用, 否则控制台输出点击的患者信息
      if (this.onCardClick) {
        this.onCardClick(this.patient);
      } else {
        console.log('this.patientInfo',this.patient);
      }
    }
  }
}
</script>

<style scoped>
.patient-card {
  background: white;
  border-radius: 0rpx 24rpx 0rpx 24rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.patient-info {
  display: flex;
  align-items: flex-start;
  gap: 20rpx;
}

.avatar-placeholder {
  width: 104rpx;
  height: 104rpx;
  background: #f0f0f0;
  border-radius: 50rpx;
}

.patient-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.patient-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.patient-basic-info {
  font-size: 26rpx;
  color: #666;
}

.patient-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.patient-tag {
  background: #E5EFFF;
  color: #1D77FF;
  font-size: 20rpx;
  padding: 6rpx 12rpx;
  border-radius: 0rpx 16rpx 0rpx 16rpx;
}
</style>